<template>
  <div class="qrcode-form">
    <add-base-form
      ref="addForm"
      v-if="opType === '1'"
      :form="form"
      :rules="formRules">
      <el-form-item :label="$t('内容')" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="3" wrap="off"
          maxlength="1000"
          :show-word-limit="false"
          clearable></el-input>
      </el-form-item>
      <el-form-item
        class="label-font-12 label-rp-5"
        :label="$t('上传LOGO')"
        prop="thumbnailFile">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="fileChange">
          <img v-if="preImg" :src="preImg" class="avatar">
          <div v-else class="upload-btn"></div>
        </el-upload>
      </el-form-item>
    </add-base-form>
    <edit-base-form
      ref="editForm"
      v-else-if="opType === '2'"
      :form="form"
      :rules="formRules">
      <el-form-item :label="$t('大小')">
        <el-input :value="form.length"></el-input>
      </el-form-item>
      <el-form-item :label="$t('尺寸')">
        <el-input :value="`${form.width} * ${form.height}`"></el-input>
      </el-form-item>
      <el-form-item :label="$t('持续时间')">
        <el-input :value="form.duration"></el-input>
      </el-form-item>
    </edit-base-form>
  </div>
</template>

<script>
import AddBaseForm from './AddBaseForm'
import EditBaseForm from './EditBaseForm'
import {toBase64} from '@/utils'

export default {
  components: {
    AddBaseForm,
    EditBaseForm
  },
  props: {
    opType: {
      type: String,
      default: '1'
    },
    form: {
      type: Object,
      required: true
    }
  },
  watch: {
    form(v) {
      this.preImg = ''
    }
  },
  data() {
    return {
      formRules: {
        name: [
          { required: true, message: '名称不能为空' }
        ],
        content: [
          { required: true, message: '内容不能为空' }
        ],
        codeFile: [
          { required: true, message: '请上传logo' }
        ]
      },
      preImg: ''
    }
  },
  methods: {
    validate(cb) {
      if (this.opType === '1') {
        this.$refs.addForm.$refs.form.validate(cb)
      } else {
        this.$refs.editForm.$refs.form.validate(cb)
      }
    },
    clearValidate(params) {
      if (this.opType === '1') {
        this.$refs.addForm.$refs.form.clearValidate(params)
      } else {
        this.$refs.editForm.$refs.form.clearValidate(params)
      }
    },
    async fileChange(file) {
      console.log(file)
      const _file = file.raw
      const isJPG = _file.type === 'image/jpeg';
      const isPNG = _file.type === 'image/png';
      const isBMP = _file.type === 'image/bmp';
      const isTIF = _file.type === 'image/tiff';
      const isLt5M = _file.size / 1024 / 1024 < 5;

      const formatPass = isJPG || isPNG || isBMP || isTIF

      if (!formatPass) {
        return this.$message.error('图片格式支持PNG、BMP、JPG、TIF');
      }
      if (!isLt5M) {
        return this.$message.error('图片大小不能超过 5MB');
      }

      
      const imgBase64 = await toBase64(_file)
      this.preImg = URL.createObjectURL(_file);
      this.form.codeFile = imgBase64.split(',')[1]

    }
  }
}
</script>

<style lang="scss" scoped>
.label-font-12 {
  ::v-deep .el-form-item__label {
    font-size: 12px;
  }
}
.label-rp-5 {
  ::v-deep .el-form-item__label {
    padding-right: 5px;
  }
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.upload-btn {
  width: 60px;
  height: 60px;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  cursor: pointer;

  position: relative;

  &::after,  &::before{
    content: '';
    display: block;
    position: absolute;
    background: #e9e9e9;
  }

  &::after {
    width: 20px;
    height: 2px;
    top: 29px;
    left: 20px;
  }

   &::before {
    width: 2px;
    height: 20px;
    top: 20px;
    left: 29px;
  }
  
}
</style>